<template>
	<view :style="objColor">
		<customer></customer>
		<view class="order_box">
			<view class="order_title">订单信息</view>

			<view class="order_detail">
				<view class="detail_li">
					<!-- #V2G功能 -->
					<view class="li_tit">{{ isV2GOption && det.disCharge ? '放电车辆：' : '充电车辆：'}}</view>
					<view class="li_box">{{ det.plateNo ? det.plateNo : '--' }}</view>
				</view>
				<view class="detail_li">
					<view class="li_tit">订单编号：</view>
					<view class="li_box">{{det.busShowNo}}
						<text class="copyButton" @tap="copyOrder" :data-busId="det.busShowNo">复制</text>
					</view>
				</view>
				<view class="detail_li">
					<!-- #V2G功能 -->
					<view class="li_tit">{{ isV2GOption && det.disCharge ? '放电电站：' : '充电电站：'}}</view>
					<view class="li_box">{{ det.stationName ? det.stationName : '--' }}</view>
				</view>
				<view class="detail_li">
					<!-- #V2G功能 -->
					<view class="li_tit">{{ isV2GOption && det.disCharge ? '放电桩枪：' : '充电桩枪：'}}</view>
					<view class="li_box">
						{{ det.pileName ? det.pileName : '--' }}{{ det.gunName ? '-' + det.gunName : '' }}
					</view>
				</view>
				<view class="detail_li">
					<view class="li_tit">实付金额：</view>
					<view class="li_box li_money">￥{{ det.actualBalance }}</view>
				</view>
			</view>
		</view>
		<view class="order_box">
			<view class="order_title">
				评价
				<text v-if="det.commentStatus == 1" class="date">{{baseFormData.commentDate}}</text>
			</view>

			<view class="order_detail">
				<view class="detail_li">
					<view class="li_tit" style="width:80rpx">评分</view>
					<view class="li_box">
						<u-rate active-color="#FC724C" inactive-color="#cccccc" gutter="15" :size="34" :count="5"
							v-model="baseFormData.rateVal" :readonly="baseFormData.isComment"></u-rate>
					</view>
					<view class="li_tit2">
						{{baseFormData.rateVal==1?'非常差':baseFormData.rateVal==2?'差':baseFormData.rateVal==3?'一般':baseFormData.rateVal==4?'好':baseFormData.rateVal==5?'非常好':''}}
					</view>
				</view>

				<!-- 未评论时 标签列表 -->
				<view class="li_tag_box" v-if="det.commentStatus == 0">
					<view :class="[item.selected?'li_tag_A':'li_tag']" v-for="(item,index) in tagList" :key="index"
						@tap="choice(index)">
						<text>{{item.name}}</text>
					</view>
				</view>
				<!-- 评论后 标签列表 -->
				<view class="li_tag_box" v-if="det.commentStatus == 1">
					<view class="li_tag_A" v-for="(item,index) in baseFormData.newSelectList" :key="index"
						v-if="item.pitchOn">
						<text>{{item.title}}</text>
					</view>
				</view>


				<view class="li_text_box">
					<!-- #ifndef MP-ALIPAY -->
					<u--textarea v-model="baseFormData.introduction" placeholder="请输入内容" height="200"
						:disabled="baseFormData.isComment" count maxlength="200"></u--textarea>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<u--textarea v-model="baseFormData.introduction" placeholder="请输入内容" height="200"
						:disabled="baseFormData.isComment" maxlength="200"></u--textarea>
					<!-- #endif -->
				</view>


				<view style="margin-top:20px;" v-if="det.commentStatus == 0">
					<!-- #ifndef MP-ALIPAY -->
					<uni-file-picker v-model="fileList" file-mediatype="image" limit="3" del-icon @select="afterRead"
						@delete="deleteFun">
					</uni-file-picker>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="3" width="200" height="200"></u-upload>
					<!-- #endif -->
				</view>

				<view class="li_image_box" v-if="det.commentStatus == 1">
					<img v-for="(item,index) in baseFormData.imageValue" :key="index" :src="item" />
				</view>

			</view>
		</view>

		<view style="height: 180rpx"></view>


		<view class="order_msg" v-if="det.commentStatus == 0">
			<view class="order_btn" @tap="submitOrder" :data-busId="det.busId">
				<text>评论</text>
			</view>
		</view>
	</view>
</template>

<script>
	'use strict';
	const app = getApp()

	var https_1 = require('./../../../api/orderMsgApi.js');

	export default {
		data() {
			return {
				imgUrl: app.globalData.URL,
				det: {},
				guns: [{
						value: 0,
						name: 'A'
					},
					{
						value: 1,
						name: 'B'
					},
					{
						value: 2,
						name: 'C'
					},
					{
						value: 3,
						name: 'D'
					},
					{
						value: 4,
						name: 'E'
					},
					{
						value: 5,
						name: 'F'
					},
					{
						value: 6,
						name: 'G'
					},
					{
						value: 7,
						name: 'H'
					},
					{
						value: 8,
						name: 'I'
					},
					{
						value: 9,
						name: 'J'
					},
					{
						value: 10,
						name: 'K'
					},
					{
						value: 11,
						name: 'L'
					},
					{
						value: 12,
						name: 'M'
					},
					{
						value: 13,
						name: 'N'
					},
					{
						value: 14,
						name: 'O'
					},
					{
						value: 15,
						name: 'P'
					},
					{
						value: 16,
						name: 'Q'
					},
					{
						value: 17,
						name: 'R'
					},
					{
						value: 18,
						name: 'S'
					},
					{
						value: 19,
						name: 'T'
					},
					{
						value: 20,
						name: 'U'
					},
					{
						value: 21,
						name: 'V'
					},
					{
						value: 22,
						name: 'W'
					},
					{
						value: 23,
						name: 'X'
					},
					{
						value: 24,
						name: 'Y'
					},
					{
						value: 25,
						name: 'Z'
					}
				],
				tagList: [],
				// 基础表单数据
				baseFormData: {
					rateVal: 5,
					introduction: '',
					imageValue: [],
					newSelectList: [],
					isComment: false,
					commentDate: '',

				},
				//存放img
				fileList: [],

				//定义前端选中的值
				selectList: [],
				selectIds: [],
				selectNames: [],

			};
		},
		methods: {
			//获取标签列表
			getCommentTaglibList: function() {
				var that = this;
				https_1
					.getCommentTaglibList(that.det.busId)
					.then(function(res) {
						console.log(res)
						res.data.forEach(item => {
							item.selected = false
						})

						that.tagList = res.data
					});
			},
			//选择按钮
			choice(index) {
				//当再次被选中时，取消当前选中项
				if (this.tagList[index].selected == true) {
					this.tagList[index].selected = false;
					//取消选中时删除数组中的值
					for (var i = 0; i < this.selectList.length; i++) {
						if (this.selectList[i] == this.tagList[index]) {
							this.selectList.splice(i, 1);
						}
					}

					console.log("选中的值11111", this.selectList)
				} else {
					this.tagList[index].selected = true;
					this.selectList.push(this.tagList[index])

					console.log("选中的值2222222", this.selectList)

				}

				let newSelectList = []
				this.selectList.forEach((item, index) => {
					newSelectList.push({
						id: item.id,
						title: item.name
					})
				})

				this.baseFormData.newSelectList = newSelectList

				console.log("选中的值----------", newSelectList)
			},

			submitOrder: function() {
				https_1
					.addBillComment({
						busId: this.det.busId,
						commentCode: this.baseFormData.rateVal,
						taglibList: this.baseFormData.newSelectList,
						content: this.baseFormData.introduction,
						img: this.baseFormData.imageValue.join(","),
					})
					.then(function(res) {

						var back_1 = function() {
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 2000
							});
							setTimeout(function() {
								// uni.showModal({
								// 	title: '消息提示',
								// 	content: '感谢您百忙之中以反馈的方式告诉我们产品的不足，我们会持续改进的',
								// 	confirmText: '返回上页',
								// 	confirmColor: '#1487FA',
								// 	showCancel: false,
								// 	success: function (r) {
								// 		if (r.confirm) {
								// 			uni.navigateBack({
								// 				delta: 1
								// 			});
								// 		}
								// 	}
								// });

								uni.navigateBack({
									delta: 1
								});
							}, 1000);
						};

						if (res.code == 0) {
							back_1();
						}
					})['catch'](function(err) {
						console.log(err);
					});
			},
			afterRead: function(event) {
				uni.showLoading({
					title: '图片上传中...',
					mask: true
				});
				console.log(event)
				let type = "wx"
				let files = event.tempFiles
				//#ifdef MP-ALIPAY
				files = event.file
				type = "ali"
				//#endif
				var that = this;
				// 处理多文件上传
				files.map(item => {
					uni.uploadFile({
						url: that.imgUrl + '/member-service/common/upload',
						filePath: type === "wx" ? item.path : item.url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: function(res) {
							console.log(res, 'sssssssss');
							var data = JSON.parse(res.data);

							if (data.code == 0) {
								let fileArr = [{
									...item,
									url: data.data
								}]
								var fileList = that.fileList.concat(fileArr);
								var urlArr = [data.data];
								var imgList = that.baseFormData.imageValue.concat(urlArr);
								that.fileList = fileList;
								that.baseFormData.imageValue = imgList;
								uni.hideLoading()
							}
						},
						fail: function() {
							uni.hideLoading()
							uni.showToast({
								title: '上传失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
				})

			},

			// afterRead: function (event) {
			//     console.log(event)
			//     const files = event.tempFiles
			//     var that = this;
			//     // 处理多文件上传
			//     files.map(item => {
			//         uni.uploadFile({
			// 			url: that.imgUrl + '/member-service/common/upload',
			// 			filePath: item.path,
			// 			name: 'file',
			// 			formData: {
			// 				user: 'test'
			// 			},
			// 			success: function (res) {
			// 				console.log(res, 'rrrrrrrr');
			// 				var data = JSON.parse(res.data);

			// 				if (data.code == 0) {
			// 					var urlArr = [data.data];
			// 					console.log(urlArr, 'uuuuuuuuuu')
			// 					let imgList = that.baseFormData.imageValue.concat(urlArr);
			// 					console.log(imgList, 'iiiiiiii')
			// 					that.baseFormData.imageValue = imgList;
			// 				}
			// 			},
			// 			fail: function () {
			// 				uni.showToast({
			// 					title: '上传失败',
			// 					icon: 'none',
			// 					duration: 2000
			// 				});
			// 			}
			// 		});
			//     })

			// },

			// 复制订单号
			copyOrder: function(e) {
				uni.setClipboardData({
					data: e.currentTarget.dataset.busid,
				});
			},
			deleteFun: function(e) {
				const index = this.baseFormData.imageValue.findIndex(item => item === e.tempFilePath);
				this.baseFormData.imageValue.splice(index, 1);
			},

			// 分转元
			regFenToYuan: function(fen, s) {
				var num = 0;

				if (!s) {
					num = (fen / 100).toFixed(2);
				} else {
					num = (fen / 10000).toFixed(2);
				}

				return num;
			},
			// 获取订单详情
			getDetails: function(id) {
				var that = this;
				https_1
					.myBillDetails({
						id: id
					})
					.then(function(res) {

						res.data.actualBalance = that.regFenToYuan(res.data.actualBalance); //实收
						if (!res.data.gunName) {
							res.data.gunName = that.guns[res.data.gunNumber].name;
						}
						if (res.data.commentStatus == 0) {
							console.log('未评论....', res.data)
							that.getCommentTaglibList()
						} else if (res.data.commentStatus == 1) {
							console.log('已评论.......', res.data)
							that.getMsgDel(res.data.busId);
						}

						that.det = res.data
					});
			},
			//获取已评价的详情
			getMsgDel: function(busId) {
				var that = this;
				https_1
					.getDetailsByBusId(busId)
					.then(function(res) {
						console.log(res.data, '已评价信息')

						that.baseFormData.commentDate = res.data.createTime;
						that.baseFormData.isComment = true;
						that.baseFormData.rateVal = res.data.commentCode;
						that.baseFormData.introduction = res.data.content;
						that.baseFormData.newSelectList = res.data.taglibList;



						if (res.data.img) {
							that.baseFormData.imageValue = res.data.img.split(',')
						}

					});
			},

		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log(options)
			this.getDetails(options.id)

			// if(options.commentstatus == 0){
			// 	console.log('未评论....',options)
			// 	this.getCommentTaglibList()
			// }else if(options.commentstatus == 1){
			// 	console.log('已评论.......',options)
			// 	this.getMsgDel(options.busId);
			// }


		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
	}
</script>

<style lang="less">
	page {
		background: #F2F3F5;
	}

	.order_box {
		width: 95%;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 2rpx 3rpx 14rpx 0rpx rgba(166, 171, 179, 0.14);
		border-radius: 16rpx;
		margin-top: 16rpx;
		padding: 32rpx 0;
		padding-bottom: 32rpx;

		.order_title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #303133;
			padding-left: 32rpx;

			.date {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #909399;
				margin-left: 24rpx;
			}
		}

		.order_detail {
			padding: 0 32rpx;

			.detail_li {
				padding-top: 30rpx;
				display: flex;

				.li_tit {
					width: 150rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #909399;
				}

				.li_tit2 {
					width: 150rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FC724C;
				}

				.li_box {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #303133;
				}

				.li_money {
					font-size: 30rpx;
					font-weight: bold;
					color: #FC724C;
				}
			}

			.li_tag_box {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;

				.li_tag {
					width: 148rpx;
					// height: 48rpx;
					// line-height: 48rpx;
					padding: 8rpx 0 16rpx;
					background: rgba(220, 223, 230, 0.4);
					border: 1rpx solid rgba(255, 255, 255, 0.6);
					border-radius: 24rpx;
					margin-top: 24rpx;
					margin-right: 10rpx;
					text-align: center;
					overflow: hidden;
					flex-shrink: 0;

					/*去除flex子元素宽度均分问题*/
					>text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #909399;
					}
				}

				/* 已选择 */
				.li_tag_A {
					width: 148rpx;
					// height: 48rpx;
					// line-height: 48rpx;
					padding: 8rpx 0 16rpx;
					background: rgb(240, 247, 234);
					border: 1rpx solid rgba(109, 177, 46, 0.6);
					border-radius: 24rpx;
					margin-top: 24rpx;
					margin-right: 10rpx;
					text-align: center;
					overflow: hidden;
					flex-shrink: 0;

					/*去除flex子元素宽度均分问题*/
					>text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #6DB12E;
					}
				}



			}

			.li_text_box {
				margin-top: 20rpx;
			}

			.li_image_box {
				margin-top: 20rpx;
				display: flex;

				img {
					margin-right: 30rpx;
					width: 90px;
					height: 90px;
				}
			}
		}
	}



	.order_msg {
		width: 100%;
		background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
		border: 2px solid rgba(255, 255, 255, 0.55);
		box-shadow: 0px -25px 67px 0px rgba(177, 182, 190, 0.2);
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 22rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.order_btn {
			width: 686rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: var(--btnColor);
			border-radius: 44rpx;
			text-align: center;

			>text {
				height: 28rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

	}

	.copyButton {
		font-size: 28rpx;
		font-weight: 400;
		color: var(--textColor);
		display: inline-block;
		border-left: 1px solid #909399;
		padding: 0 0 0 20rpx;
		margin-left: 20rpx;
	}
</style>